<template>
  <div>
    <a-card :bordered='false'>
      <!--  #####################查询条件###################  -->
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='48'>
            <a-col :md='8' :sm='24'>
              <a-form-item label='小程序'>
                <a-select placeholder='小程序' showSearch optionFilterProp='children'
                          v-model='queryParam.customerCode' :filterOption='filterOption'>
                  <a-select-option v-for='item in customers' :key='item.code'>{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md='8' :sm='24'>
              <a-form-item label='商品'>
                <a-select mode='multiple' v-model='queryParam.productIds' placeholder='商品'
                          v-decorator="[ 'id', {rules: []} ]">
                  <a-select-option v-for='item in product' :key='item.id'>{{ item.productName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md='8' :sm='24'>
              <a-form-item label='核销人'>
                <a-select placeholder='核销人' showSearch optionFilterProp='children'
                          v-model='queryParam.userId' :filterOption='filterOption'>
                  <a-select-option v-for='item in sysUser' :key='item.id'>{{ item.username }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md='8' :sm='24'>
              <a-form-item label='状态'>
                <a-select placeholder='状态' showSearch optionFilterProp='children'
                          v-model='queryParam.status' :filterOption='filterOption'>
                  <a-select-option value='0'>未领取</a-select-option>
                  <a-select-option value='1'>未使用</a-select-option>
                  <a-select-option value='2'>已使用</a-select-option>
                  <a-select-option value='3'>已过期</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md='8' :sm='24'>
              <a-form-item label='手机号'>
                <a-input placeholder='手机号' v-model='queryParam.mobile' allowClear />
              </a-form-item>
            </a-col>


            <a-col :md='!advanced && 8 || 24' :sm='24'>
              <span class='table-page-search-submitButtons'
                    :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button v-action:query type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
                <a-button style='margin-left: 8px' @click='() => queryParam = {}'>重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!--  #####################操作###################  -->
      <!--<div class="table-operator">
        <a-button v-action:add type="primary" icon="plus" @click="handleAdd()">新建</a-button>
      </div>-->

      <!--  #####################表格###################  -->
      <s-table ref='table' :columns='columns' :data='loadData'>
        <a-tag slot='status' slot-scope='text' :color='text | statusColorFilter'>
          {{ text | statusFilter }}
        </a-tag>

        <span slot='action' slot-scope='text, record'>
          <template>
            <a v-action:other v-if='record.status == 0 || record.status==1' @click='handleUseCoupon(record)'>核销优惠券</a>
          </template>
        </span>
      </s-table>

      <!--  #####################打开的页面###################  -->
      <!-- <edit ref="createModal" @ok="refresh"/>-->

    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import { optionselect } from '@/api/mini/pic'
import { getAllProduct, productList } from '@/api/usage/usage'
import { selectAll } from '@/api/system/user'
import {useCoupon} from '@/api/member/memberProduct'
import { del } from '@/api/product/commodity'

/**
 * 组件
 */
const components = { STable }

const columns = [
  {
    title: '券名',
    dataIndex: 'productName'
  },
  // {
  //   title: '券批次号',
  //   dataIndex: 'stockId'
  // },
  {
    title: '券编号',
    dataIndex: 'couponCode'
  },
  {
    title: '用户名',
    dataIndex: 'nickName'
  },
  {
    title: '用户手机号',
    dataIndex: 'mobile'
  },
  {
    title: '领取时间',
    dataIndex: 'createdTime'
  },
  {
    title: '核销状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '核销时间',
    dataIndex: 'consumeTime'
  },
  ,
  {
    title: '核销人',
    dataIndex: 'writeOffUserName'
  },
  {
    title: '核销订单号',
    dataIndex: 'transactionId'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '100px',
    scopedSlots: { customRender: 'action' }
  }
]

const statusMap = {
  0: {
    status: '',
    text: '未领取'
  },
  1: {
    status: 'cyan',
    text: '未使用'
  },
  2: {
    status: 'red',
    text: '已使用'
  },
  3: {
    status: 'red',
    text: '已过期'
  }
}



const created = function() {
  getAllProduct().then(res => {
    if (res.code === 200) {
      this.product = res.data
    }
  })
  optionselect().then(res => {
    if (res.code === 200) {
      this.customers = res.data
    }
  })
  selectAll({userType:3}).then(res=>{
    if (res.code == 200) {
      this.sysUser = res.data;
    }
  })
  var productId = this.$route.query.productId
  if (productId > 0) {
    this.queryParam.productIds = [productId];
  }
}

/**
 * 数据
 */
const data = function() {
  return {
    // 高级搜索 展开/关闭
    advanced: false,
    // 查询参数
    queryParam: {},
    productIds: {},
    columns,
    stores: [],
    product: [],
    customers: [],
    sysUser:[],
    // 加载数据方法 必须为 Promise 对象
    loadData: parameter => {
      return productList(Object.assign(parameter, this.queryParam)).then(res => {
        return res.data
      })
    }
  }
}

/**
 * 过滤器
 */
const filters = {
  statusFilter(status) {
    return statusMap[status].text
  },
  statusColorFilter(status) {
    return statusMap[status].status
  }
}

/**
 * 计算属性
 */
const computed = {}

/**
 * 侦听器
 */
const watch = {}

export default {
  data: data,
  components: components,
  created: created,
  filters: filters,
  computed: computed,
  watch: watch,
  /**
   * 方法
   */
  methods: {
    handleAdd() {
      this.$refs.createModal.add()
    },
    handleEdit(record) {
      this.$refs.createModal.edit(record)
    },
    refresh() {
      this.$refs.table.refresh()
    },
    handleDel(record) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: `真的要删除 ${record.name} 吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          // 在这里调用删除接口
          del(record.id).then(res => {
            if (res.code === 200) {
              _this.$message.success(res.message)
              _this.$refs.table.refresh()
            }
            if (res.code === 500) {
              _this.$message.error(res.message)
            }
          })
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleUseCoupon(record){
      const _this = this
      this.$confirm({
        title: '警告',
        content: `确认核销吗?`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          // 在这里调用接口
          useCoupon(record.id).then(res=>{
            if(res.code === 200){
              _this.$message.success(res.data)
              _this.$refs.table.refresh()
            }
            if (res.code === 500) {
              _this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
